import React, { useState } from 'react'
import { DatePicker, Button, Typography, Space } from 'antd';
import { QqOutlined, SearchOutlined } from '@ant-design/icons';

const { Paragraph } = Typography;

export default function AntdCom() {
  //声明状态
  let [v, setV] = useState('xxxxx');
  return (
    <>
      <h2>时间选择器</h2>
      <DatePicker />

      <h2>按钮</h2>
      <Space size={'large'}>
        <Button type="primary">点我订票</Button>
        <Button danger>点我抽奖</Button>
        <Button type="primary" icon={<SearchOutlined />}>
          搜索
        </Button>
      </Space>
      <h2>图标</h2>
      <QqOutlined style={{ fontSize: 40, color: '#25c' }} />

      <h2>排版</h2>
      <Paragraph copyable>This is a copyable text.</Paragraph>

      <Paragraph editable={{ onChange: setV }}>{v}</Paragraph>

    </>
  )
}
